<!-- 表扬 -->
<template>
	<pannel @reback="reback">
		<audio ref="hhmusic" src="/mp3/end.mp3" crossOrigin="anonymous" preload></audio>
		<div class="list">
			<div>
				<div class="sign-con">
					<div
						v-for="(item, index) in showScoreList"
						class="flex flex-pack-center"
						:class="{
							bigtosmall: item.score > 0,
						}"
						style="cursor: pointer; padding-top: 10px"
						@click="praiseStud(item)"
					>
						<div class="sign-item flex flex-v flex-align-center">
							<a-badge :count="item.score"
								><img src="/impromptu/flower.png" v-if="item.score == 0" />
								<img src="/impromptu/flower_select.png" v-else />
							</a-badge>
							{{ item.studName }}
						</div>
					</div>
				</div>
				<div class="tips">请点击需要表扬的学生头像</div>
			</div>
			<div class="right-tabs">
				<div class="tab" :class="[{ blue: operateType == 'class' }]" @click="changeType('class')">
					本节课表扬
				</div>
				<div class="tab" :class="[{ blue: operateType == 'year' }]" @click="changeType('year')">本学年表扬</div>
			</div>
		</div>
		<praiseModal ref="praiseModal" @ok="okpraise"></praiseModal>
	</pannel>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
import praiseModal from '../module/praiseModal.vue';
import pannel from './pannel.vue';
import bus from '@/utils/eventBus';
import { debounce } from '@/utils/base.js';
export default {
	name: 'praise',
	components: { praiseModal, pannel },
	props: {
		//接收器信息
		machineData: {
			type: Object,
			default: () => {},
		},
		//表单数据
		formData: {
			type: Object,
			default: () => {},
		},
	},
	data() {
		return {
			scoreList: [],
			showScoreList: [],
			csId: '',
			classId: '',
			operateType: 'class',
			oldComponent: '',
		};
	},
	created() {
		let beginClassData = this.$ls.get('beginClass'); //上课数据
		this.csId = beginClassData.csId;
		this.classId = beginClassData.classId;
		this.getScoreList();
		// this.addOpr();
	},
	watch: {
		changeList: {
			handler(newValue, oldValue) {
				//监听学生名单，状态变化，同步给后端
				if (JSON.stringify(newValue) != JSON.stringify(oldValue)) {
					let list = [];
					if (this.studentList && this.studentList.length > 0) {
						list = this.studentList.map((item) => {
							let info = {
								studName: item.studName,
								studId: item.studId,
								score: 0,
							};
							if (this.scoreList && this.scoreList.length > 0) {
								let scoreInfo = this.scoreList.find((sitem) => sitem.studId == item.studId);
								if (scoreInfo) {
									console.log('info', info, scoreInfo);
									info.score = scoreInfo.score;
								}
							}

							return info;
						});
					}
					list = list.sort((a, b) => {
						return b.score - a.score;
					});
					console.log('list', list);
					this.showScoreList = [...list];
				}
			},
			immediate: true, //初始化时让handler调用一下
			deep: true, // 开启深度监听
		},
	},
	computed: {
		...mapState({
			deviceType: (state) => state.websockStore.deviceType,
			studentList: (state) => state.websockStore.studentList,
			stopDeviceEventList: (state) => state.websockStore.stopDeviceEventList,
			isPro: (state) => state.isPro,
		}),

		//绑定学生人数
		praiseNum() {
			let list = [];
			if (this.showScoreList && this.showScoreList.length > 0) {
				list = this.showScoreList.filter((item) => item.score > 0);
			}
			return list.length;
		},
		changeList() {
			return {
				studentList: this.studentList,
				scoreList: this.scoreList,
			};
		},
	},

	methods: {
		...mapMutations(['WEBSOCKET_SEND', 'SET_studentList', 'SET_STOPDEVICEEVENTLIST']),

		//返回
		reback() {
			this.$emit('checkMenu', { type: 'praise' });
		},
		changeType(operateType) {
			this.operateType = operateType;
			this.getScoreList();
		},
		getScoreList() {
			let url = this.$sysManageapi.answerUrl.getScoreList;
			if (this.operateType == 'class') {
				url = url + '?csId=' + this.csId;
			} else {
				url = url + '?classId=' + this.classId;
			}
			this.$postAction(url).then((res) => {
				let list = [],
					signIds = [];
				this.scoreList = res.data || [];
			});
		},

		praiseStud(stud) {
			this.$refs.praiseModal.show(stud, 3, this.csId, this.formData.classId);
		},
		backComponent(oldComponent) {
			this.oldComponent = oldComponent;
		},
		addOpr() {
			this.$postAction(this.$sysManageapi.answerUrl.addOpr, {
				classId: this.formData.classId,
				subjectCode: this.formData.subjectCode,
				opType: 'praise',
				userId: this.userinfo.userId,
			});
		},
		okpraise() {
			this.$refs.hhmusic.play();
			this.getScoreList();
		},
	},
};
</script>

<style lang="less" scoped>
.list {
	padding: 20px;

	.sign-con {
		display: grid;
		grid-template-columns: repeat(8, calc((100% - 200px) / 8));
		row-gap: 25px;
		column-gap: 30px;
		line-height: 1;
		height: 0;
		.sign-item {
			color: #2e2424;
			font-size: 24px;
			img {
				width: 60px;
				height: 60px;
			}
		}
	}
}
.tips {
	position: absolute;
	bottom: 22px;
	left: 30px;
	right: 30px;
	text-align: center;
	font-size: 20px;
	color: #242424;
	font-weight: bold;
	z-index: 9;
	background-color: #fff;
	padding-bottom: 30px;
	.high {
		color: @primary-color;
	}
}
.conbox-ft {
	width: 1162px;
	margin: 35px auto 0;
	padding: 10px 0;
	.save-btn {
		background: @primary-color;
		margin: 0 auto;
		width: 300px;
		height: 60px;
		line-height: 60px;
		text-align: center;
		color: #fff;
		font-size: 30px;
		font-weight: bold;
		border-radius: 40px;
		cursor: pointer;
		&.red {
			background: #e64343;
			border-color: rgba(230, 67, 67, 0.5);
		}
	}
	.save-btn.disabeld {
		background: #becad4;
	}
	@media screen and (max-width: 1366px) {
		width: 1024px;
	}
}

/* 主体内容右侧tab */
.right-tabs {
	position: absolute;
	left: calc(100% - 148px);
	bottom: 25px;
	background: @primary-color;
	width: 123px;
	padding: 2px 6px 2px 2px;
	color: #4d5053;
	font-size: 22px;
	z-index: 999;
	font-weight: bold;
	.tab {
		background: #fff;
		text-align: center;
		cursor: pointer;
		&.blue {
			background: none;
			color: #fff;
		}
	}
}
</style>

<style scoped>
.sign-item.bigtosmall {
	-webkit-animation: bigtosmall 1s ease forwards;
	opacity: 1;
}
@keyframes bigtosmall {
	0% {
		transform: scale(0.1);
		opacity: 0;
	}
	70% {
		transform: scale(1.2);
		opacity: 1;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}
@-webkit-keyframes bigtosmall {
	0% {
		-webkit-transform: scale(0.1);
		opacity: 0;
	}
	70% {
		-webkit-transform: scale(1.2);
		opacity: 1;
	}
	100% {
		-webkit-transform: scale(1);
		opacity: 1;
	}
}
</style>
